<template>
    <div class="con">
        <p class="title">选择意见反馈类型</p>
        <div class="main">
            <div
                v-for="(item,index) in getFeedbackType"
                :key="index"
                class="list"
                @click="choose(item.propertyKey)"
            >
                <p>{{item.propertyValue}}</p>
                <img src="../assets/images/ok.png" alt v-show="type==item.propertyKey">
            </div>
        </div>
        <div class="problem">
            <div class="text">
                <textarea name id rows="8" placeholder="请输入您遇到的问题或建议" v-model="content"/>
            </div>
            <input
                type="number"
                placeholder="输入手机号"
                class="phone"
                v-model="phone"
                oninput="if(this.value.length>11) this.value = this.value.slice(0,11);"
                pattern="[0-9]*"
            >
        </div>

        <div class="btn" :class="{ graybtn: isgraybtn }" @click="ok()">
            <button id="graybtn" :disabled="isgraybtn">提交</button>
        </div>
    </div>
</template>

<script>
export default {
    name: "feedback",
    data() {
        return {
            isgraybtn: false,
            timestamp: "",
            type: 1,
            content: "",
            getFeedbackType: {},
            phone: "",
            key: 1
        };
    },
    methods: {
        choose(type) {
            this.type = type;
        },
        ok() {
            var filterphone = /^1\d{10}$/;
            if (this.content == "") {
                this.$toast("请输入反馈内容");
            } else if (this.phone == "") {
                this.$toast("请输入手机号码");
            } else if (filterphone.test(this.phone) == false) {
                this.$toast("手机号格式错误");
            } else {
                this.isgraybtn = true;
                this.axios({
                    method: "post",
                    url: `${
                        this.siteUrl
                    }/app/feedback/addFeedback?appid=web.2019&format=json&timestamp=${
                        this.timestamp
                    }`,
                    data: {
                        feedbackTypeKey: this.type,
                        phone: this.phone,
                        feedbackContent: this.content,
                        feedbackChannelKey: this.key // 1 ios/ 2 android
                    }
                })
                    .then(response => {
                        if (response.data.success == 1) {
                            this.content = "";
                            this.phone = "";
                            this.$toast(response.data.message);
                            this.isgraybtn = false;
                        } else {
                            this.$toast(response.data.message);
                            this.isgraybtn = false;
                        }
                    })
                     .catch(error=> {
                        console.log(error);
                        this.$toast("连接服务器异常");

            });
            }
        }
    },
    mounted() {
        this.timestamp = Date.parse(new Date()) + 100;

        // 从浏览器判断苹果还是安卓

        if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
            this.key = 1;
        } else {
            this.key = 2;
        }
        this.axios({
            method: "post",
            url: `${
                this.siteUrl
            }/app/feedback/getFeedbackType?appid=web.2019&format=json&timestamp=${
                this.timestamp
            }`
        })
            .then(response => {
                if (response.data.success == 1) {
                    this.getFeedbackType = response.data.data;
                } else {
                    this.$toast(response.data.message);
                }
            })
            .catch(error=> {
                console.log(error);
                this.$toast("连接服务器异常");

            });
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.con {
    width: 100%;
    min-height: 100vh;
    background: #f9f9f9;
}
.title {
    color: #a6a9b5;
    padding-top: 24px;
    margin-left: 20px;
}
.main {
    margin-top: 12px;
    width: 100%;
    background: #fff;
}
.main .list {
    height: 62px;
    width: 90%;
    margin-left: 5%;
    position: relative;
    border-bottom: 1px solid #ececec;
}
.main .list:last-child {
    border-bottom: none;
}
.main .list img {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 2px;
    top: 21px;
}
.main .list p {
    line-height: 62px;
    color: #2d3659;
}
.problem {
    width: 100%;
    margin-top: 12px;
    background: #fff;
    padding: 15px 0px;
}
.text {
    width: 90%;
    margin-left: 5%;
    border: 1px solid #ececec;
    border-radius: 4px;
}
textarea {
    width: 90%;
    resize: none;
    border: none;
    font-size: 14px;
    padding: 5%;
}
.phone {
    margin-top: 10px;
    width: 90%;
    margin-left: 5%;
    height: 50px;
    border-bottom: 1px solid #f2f2f2;
    font-size: 14px;
}
.btn {
    width: 90%;
    margin: 0 auto;
    height: 48px;
    line-height: 48px;
    background: #ffae4e;
    margin-top: 24px;
    text-align: center;
    border-radius: 25px;
    box-shadow: 0px 10px 30px 0px #fbc27f;
}
.btn button {
    width: 100%;
    font-size: 17px;
    color: #fff;
    background: transparent;
}
.graybtn {
    background: #ffe3c2;
    box-shadow: none;
}
#graybtn {
    height: 48px;
}
</style>
